<template>
	<view>
		<!-- 搜索框 -->
		<view class="" >
		    <view class="weui-search-bar__box weui-search-bar__form" style="width: 90%;" @click="navigateTosearch(search)">
		        <icon class="weui-icon-search_in-box1" type="search" size="14"></icon>
		        <input type="text" class="weui-search-bar__input" style="left: 2rpx;" placeholder="请输入搜索内容" >
			
		    </view>
			<view>
				 <text class="weui-icon-search_in-box iconfont icon-fatie_icon" size="14" @click="addinput()"></text> 
				
			</view>
		</view>
		<!-- 顶部选项卡 -->
		<scroll-view scroll-x class="scroll-row font-md border-bottom border-light-secondary" :scroll-into-view="scrollInto" scroll-with-animation=""style="100rpx">
			<view v-for="(item,index) in tabBars" :key="index" class="scroll-row-item px-5 py-2" :id="'tab'+index" :class="tabIndex===index?'text-main font-lg font-weight-bold':''" @click="changTab(index)">{{item.name}}</view>
		</scroll-view>	
			
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in newsList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<template v-if="item.list.length >0">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 列表 -->
						 <common-list :item="item2" :index="index2" :friend="friend" @follow="follow" @dosupport="dosupport"> </common-list>
						<!-- 分割线 -->
						<divider></divider>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 无数据 -->
					<template v-else>
						<no-thing></no-thing>
					      
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
			
	</view>
</template>

<script>
	
	import commonList from "@/components/common/common-list.vue";
	import loadMore from "@/components/common/load-more.vue";
	export default {
		components:{
			commonList,
			loadMore
		},
		data() {
			return {
				friend:[],
				demo:[],
				scrollH:600,
				// 顶部选项卡
				scrollInto:"",
				tabIndex:0,
				tabBars:[{
					name:"关注"
				},
				{
					name:"推荐"
				},
				{
					name:"体育"
				},
				{
					name:"热点"
				},
				{
					name:"财经"
				}
				],
				newsList:[]
			}
		},
		
		onLoad() { 
			// this.$store.commit('changeLoginStatus',123)
			// console.log(this.$store.state.loginsStatus);
			console.log(this.$C.webUrl);
                 uni.getSystemInfo({
					 success:res=>{
						 this.scrollH=res.windowHeight-uni.upx2px(100)
					 }
				 })
				 //根据选项生成列表
			
				 
		},
		onShow(){
			this.getData()
			this.getUser()
				},
		//监听下拉刷新
		onPullDownRefresh(){   
			this.refresh()
		},
		methods: {
			
			// 获取数据
			async getUser() {
				if(this.friend !==''){
							const res = await uniCloud.callFunction({
								name: "friend",
								data: {
									action: 'getOne',
									id:this.$store.state.loginsStatus
								}
							})
							this.friend=res.result.data[0].friend
							console.log(this.friend)
						}
			
				},
				
			
			//下拉刷新
			refresh(){
				setTimeout(()=>{
					this.list=demo
					uni.stopPullDownRefresh( )
				},500)
			},
			getdata(){
				return new Promise((resolve,reject) => {
					const db=uniCloud.database()
					const collection=db.collection('tiezi')
					let res = collection.get()
					.then(res => {
						
						this.demo=res.result.data
						
						resolve(res)
					})
					.catch(err => {
						
						reject(err)
					})
				})
			},
			//监听点击导航栏搜索框
			navigateTosearch(search){
				uni.navigateTo({
					url:'../search/search?type=post',
				})
			},
			
			//跳转发帖页面
			addinput(){
				
				this.checkAuth(()=>{
					uni.navigateTo({
						url:'../add-input/add-input',
					})
					
				})
					
			},
			
			//获取数据
			async getData(){
				await this.getdata()
				
				var arr=[]
				for(let i=0;i<this.tabBars.length;i++){
					//生成列表模板
					let obj={
						//1.上拉加载更多 2.加载中... 3.没有更多了...
						loadmore:"上拉加载更多",
						list:[]
					}
					if(i<3)
					{
						obj.list=this.demo
						
					}
					arr.push(obj)
				}
				this.newsList=arr
				// console.log(this.newsList)
				
			},
			//监听滑动
			onChangeTab(e){
				this.changTab(e.detail.current)
			},
			//切换选项
			changTab(index){
				
				if(this.tabIndex===index)
				{
					return;
				}
				this.tabIndex=index
				//滚动到指定元素
				this.scrollInto='tab'+index
			},
			// 关注
              follow(e){
				  
				  //console.log(this.newsList[e].isFollow)
				 let list=this.newsList[this.tabIndex].list
				 list[e].isFollow=true
				  uni.showToast({
				  	title:"关注成功",
				  })
			  },
			  //顶踩
			  dosupport(e){
				   let list = this.newsList[this.tabIndex].list
				   let item=list[e.index]
				   let msg = e.type==='support'?'顶':'踩'
				  //之前没操作过
				  if(item.support.type==='')
				  {
				  item.support.type=e.type
				  item.support[e.type+'_count']++
				  }
				  else if(item.support.type==='support' && e.type==='unsupport')
				  {
					  item.support.support_count--;
					  item.support.unsupport_count++;
				  }
				  else if(item.support.type==='unsupport'&& e.type==='support')
				  {
					  item.support.support_count++;
					  item.support.unsupport_count--;
				  }
				  item.support.type=e.type
				 uni.showToast({
					 title:msg
					 
				 })
				 
			  },
			  //上拉加载更多
			  loadmore(index){
				  
				  let item=this.newsList[index]
				  //判断是否处于可加载状态（上拉加载更多）
				  if(item.loadmore!=='上拉加载更多')return;
				  //修改当前列表的加载状态
				  item.loadmore="加载中..."
				  
				  //模拟数字请求
				  setTimeout(()=>{
					  //加载数据
					  item.list=[...item.list,...item.list]
					  //恢复加载状态
					   item.loadmore="上拉加载更多"
				  },4000)
			  }
 
		}
	}
</script>

<style>
	.weui-icon-search_in-box1{
		position: absolute;
		left: 11px;
		top: 7px;
	}
	.weui-search-bar {
	  position: relative;
	  padding: 8px 10px;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  box-sizing: border-box;
	  background-color: #EFEFF4;
	  border-top: 1rpx solid #D7D6DC;
	  border-bottom: 1rpx solid #D7D6DC;
	}
	.weui-icon-search_in-box {
	  position: absolute;
	  right: 11px;
	  top: 7px;
	}
	.weui-search-bar__form {
	  position: relative;
	  -webkit-box-flex: 1;
	  -webkit-flex: auto;
	          flex: auto;
	  border-radius: 5px;
	  background: #FFFFFF;
	  border: 1rpx solid #E6E6EA;
	}
	.weui-search-bar__box {
	  position: relative;
	  padding-left: 30px;
	  padding-right: 30px;
	  width: 100%;
	  box-sizing: border-box;
	  z-index: 1;
	}
	.weui-search-bar__input {
	  height: 28px;
	  line-height: 28px;
	  font-size: 14px;
	}
	.weui-search-bar__cancel-btn {
	  margin-left: 10px;
	  line-height: 28px;
	  color: #1296db;
	  white-space: nowrap;
	}
	
</style>
